<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Raqba - Real Estate HTML Template | Home Page 01</title>
<!-- Stylesheets -->
<link th:href="@{css/bootstrap.css}" rel="stylesheet">
<link th:href="@{css/style.css}" rel="stylesheet">
<link th:href="@{css/responsive.css}" rel="stylesheet">
<!--Color Switcher Mockup-->
<link th:href="@{css/color-switcher-design.css}" rel="stylesheet">

<!--Color Themes-->
<link id="theme-color-file" th:href="@{css/color-themes/default-theme.css}" rel="stylesheet">

<link rel="shortcut icon" th:href="@{images/favicon.png}" type="image/x-icon">
<link rel="icon" th:href="@{images/favicon.png}" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>

<body>



<div class="page-wrapper">
    <!-- Preloader -->
    <div class="preloader"></div>



    <!-- Main Header-->
    <header class="main-header header-style-one">
        <!--Header Top-->
        <div th:include="header :: headname"></div>
        <!-- End Header Top -->


        <!--End Header Lower-->

        <!-- Sticky Header  -->
        <div class="sticky-header">
            <div class="auto-container clearfix">
                <!--Logo-->
                <div class="logo pull-left">
                    <a href="index.html" title=""><img src="images/icons/empty.png" data-src="images/logo-small.png" alt="" title=""></a>
                </div>
                <!--Right Col-->
                <div class="nav-outer pull-right">
                    <!--Mobile Navigation Toggler-->
                    <div class="mobile-nav-toggler"><span class="icon flaticon-menu"></span></div>
                    
                    <!-- Main Menu -->
                    <nav class="main-menu navbar-expand-lg">
                        <div class="navbar-collapse collapse clearfix">
                             <ul class="navigation clearfix"><!--Keep This Empty / Menu will come through Javascript--></ul>
                        </div>
                    </nav><!-- Main Menu End-->
                </div>
            </div>
        </div><!-- End Sticky Menu -->


        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><span class="icon flaticon-cancel-1"></span></div>
            
            <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
            <nav class="menu-box">
                <div class="nav-logo"><a href="index.html"><img src="images/icons/empty.png" data-src="images/logo.png" alt="" title=""></a></div>
                
                <ul class="navigation clearfix"><!--Keep This Empty / Menu will come through Javascript--></ul>
            </nav>
        </div><!-- End Mobile Menu -->
    </header>
    <!--End Main Header -->

    <!-- Banner Section -->
    <section class="banner-section">
        <div class="banner-carousel owl-carousel owl-theme">
            <!-- Slide Item -->
            <div class="slide-item" style="background-image: url(images/main-slider/1.jpg);">
                <div class="auto-container">
                    <div class="inner-box">
                        <div class="content-box">
                            <span class="price">$ 2.5 K<small>/month</small></span>
                            <h2>Beautiful House in The Best Place.</h2>
                            <ul class="property-info">
                                <li>
                                    <span class="icon flaticon-bed-1"></span>
                                    <strong>03</strong>
                                    <p>Bed Room</p>
                                </li>
                                <li>
                                    <span class="icon flaticon-kitchen"></span>
                                    <strong>01</strong> 
                                    <p>Kitchen Room</p>
                                </li>
                                <li>
                                    <span class="icon flaticon-grass"></span>
                                    <strong>02</strong>
                                    <p>Play Ground</p>
                                </li>
                            </ul>
                            <div class="address"><span class="icon fa fa-map-marker-alt"></span>40 Baria Sreet 133/2 Stock Exchange, Barclas Center </div>
                            <div class="btn-box"><a href="#" class="theme-btn btn-style-two"><span class="btn-title">获取预约</span></a></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!--End Banner Section -->

    
    <!-- Property Search Section -->
    <section class="property-search-section">
        <div class="auto-container">
            <div class="property-search-tabs tabs-box">
                <ul class="tab-buttons">
                    <li data-tab="#sale" class="tab-btn active-btn">销售</li>
                    <li data-tab="#rent" class="tab-btn">租借</li>
                </ul>

                <div class="tabs-content">
                    <!--Tab / Active Tab-->
                    <div class="tab active-tab" id="sale">
                        <div class="property-search-form">
                            <form method="post" th:action="@{/searchindexbysale}">
                                <div class="row">
                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <select class="custom-select-box" name="type">
                                            <option value="all">所有类型</option>
                                            <option value="residential">住宅房</option>
                                            <option value="villa">别墅</option>
                                            <option value="industrial">工业房</option>
                                            <option value="office">办公房</option>
                                            <option value="hotel">旅馆</option>
                                        </select>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <input type="text" name="title" placeholder="名字">
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <input type="text" name="address" placeholder="地址">
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <select class="custom-select-box" name="bedcount">
                                            <option value="all">Any Bedrooms</option>
                                            <option value="1">01 Bedroom</option>
                                            <option value="2">02 Bedroom</option>
                                            <option value="3">03 Bedroom</option>
                                            <option value="4">04 Bedroom</option>
                                            <option value="5">05 Bedroom</option>
                                        </select>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <select class="custom-select-box" name="bathcount">
                                            <option value="all">Any Bathrooms</option>
                                            <option value="1">01 Bathrooms</option>
                                            <option value="2">02 Bathrooms</option>
                                            <option value="3">03 Bathrooms</option>
                                            <option value="4">04 Bathrooms</option>
                                            <option value="5">05 Bathrooms</option>
                                        </select>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <div class="row">
                                            <div class="form-group col-lg-6 col-md-6 col-sm-6">
                                                <select class="custom-select-box" name="minprice">
                                                    <option value=0>最小价格</option>
                                                    <option value="1000">$1000</option>
                                                    <option value="5000">$5000</option>
                                                    <option value="10000">$10000</option>
                                                    <option value="20000">$20000</option>
                                                    <option value="50000">$50000</option>
                                                </select>
                                            </div>

                                            <div class="form-group col-lg-6 col-md-6 col-sm-6">
                                                <select class="custom-select-box" name="maxprice">
                                                    <option value=99999999>最大价格</option>
                                                    <option value="1000">$1000</option>
                                                    <option value="5000">$5000</option>
                                                    <option value="10000">$10000</option>
                                                    <option value="20000">$20000</option>
                                                    <option value="50000">$50000</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <div class="range-slider-one clearfix">
                                            <div class="title">面积</div>
                                            <div class="input"><input type="text" class="property-amount" name="field-name" readonly></div>
                                            <div class="area-range-slider"></div>
                                        </div>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <div class="range-slider-one clearfix">
                                            <div class="title">价格</div>
                                            <div class="input"><input type="text" class="price-amount" name="field-name" readonly></div>
                                            <div class="price-range-slider"></div>
                                        </div>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <button type="submit" class="theme-btn btn-style-three"><span class="btn-title">搜索</span></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!--Tab -->
                    <div class="tab" id="rent">
                        <div class="property-search-form">
                            <form method="post" th:action="@{/searchindex}">
                                <div class="row">
                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <select class="custom-select-box" name="type">
                                            <option value="all">所有类型</option>
                                            <option value="residential">住宅房</option>
                                            <option value="villa">别墅</option>
                                            <option value="industrial">工业房</option>
                                            <option value="office">办公房</option>
                                            <option value="hotel">旅馆</option>
                                        </select>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <input type="text" name="title" placeholder="名字">
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <input type="text" name="address" placeholder="地址">
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <select class="custom-select-box" name="bedcount">
                                            <option value="all">Any Bedrooms</option>
                                            <option value="1">01 Bedroom</option>
                                            <option value="2">02 Bedroom</option>
                                            <option value="3">03 Bedroom</option>
                                            <option value="4">04 Bedroom</option>
                                            <option value="5">05 Bedroom</option>
                                        </select>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <select class="custom-select-box" name="bathcount">
                                            <option value="all">Any Bathrooms</option>
                                            <option value="1">01 Bathrooms</option>
                                            <option value="2">02 Bathrooms</option>
                                            <option value="3">03 Bathrooms</option>
                                            <option value="4">04 Bathrooms</option>
                                            <option value="5">05 Bathrooms</option>
                                        </select>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <div class="row">
                                            <div class="form-group col-lg-6 col-md-6 col-sm-6">
                                                <select class="custom-select-box" name="minprice">
                                                    <option value=0>最小价格</option>
                                                    <option value="1000">$1000</option>
                                                    <option value="5000">$5000</option>
                                                    <option value="10000">$10000</option>
                                                    <option value="20000">$20000</option>
                                                    <option value="50000">$50000</option>
                                                </select>
                                            </div>

                                            <div class="form-group col-lg-6 col-md-6 col-sm-6">
                                                <select class="custom-select-box" name="maxprice">
                                                    <option value=99999999>最大价格</option>
                                                    <option value="1000">$1000</option>
                                                    <option value="5000">$5000</option>
                                                    <option value="10000">$10000</option>
                                                    <option value="20000">$20000</option>
                                                    <option value="50000">$50000</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <div class="range-slider-one clearfix">
                                            <div class="title">面积</div>
                                            <div class="input"><input type="text" class="property-amount" name="field-name" readonly></div>
                                            <div class="area-range-slider"></div>
                                        </div>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <div class="range-slider-one clearfix">
                                            <div class="title">价格</div>
                                            <div class="input"><input type="text" class="price-amount" name="field-name" readonly></div>
                                            <div class="price-range-slider"></div>
                                        </div>
                                    </div>

                                    <!-- Form Group -->
                                    <div class="form-group col-lg-4 col-md-6 col-sm-12">
                                        <button type="submit" class="theme-btn btn-style-three"><span class="btn-title">搜索</span></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Property Search Section -->

    <!-- About Section -->
    <section class="about-section">
        <div class="auto-container">
            <div class="row">
                <!-- Content COlumn -->
                <div class="content-column col-lg-6 col-md-12 col-sm-12 order-2">
                    <div class="inner-column">
                        <div class="sec-title">
                            <div class="devider"><span></span></div>
                            <h2>关于我们</h2>
                            <div class="text">Raqba Real Estate Agency Welcome To Best</div>
                        </div>

                        <!-- text Box -->
                        <div class="text-box">
                            <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. terative approaches to corporate strategy foster collaborative thinking to further</p>
                        </div>

                        <!-- About Block -->
                        <div class="about-block wow fadeInUp">
                            <div class="inner">
                                <div class="icon flaticon-layers"></div>
                                <h4>Our Mission</h4>
                                <div class="text">Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day.</div>
                            </div>
                        </div>

                        <!-- About Block -->
                        <div class="about-block wow fadeInUp">
                            <div class="inner">
                                <div class="icon flaticon-bar-chart"></div>
                                <h4>Our Vision</h4>
                                <div class="text">Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day.</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Feature Column -->
                <div class="feature-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column" style="background-image: url(images/resource/image-1.jpg);">
                        <div class="row no-gutters">
                            <!-- Title Block -->
                            <div class="title-block col-lg-6 col-md-6 wow fadeIn">
                                <div class="inner-box">
                                    <h3>Our Best <br>Estate Offers</h3>
                                </div>
                            </div>

                            <!-- Feature-block -->
                            <div class="feature-block col-lg-6 col-md-6 wow fadeIn" data-wow-delay="400ms">
                                <div class="inner-box">
                                    <div class="icon flaticon-home-insurance"></div>
                                    <h4><a href="property-detail.html">Estate insurance</a></h4>
                                    <div class="text">Estate Management</div>
                                </div>
                            </div>

                            <!-- Feature-block -->
                            <div class="feature-block col-lg-6 col-md-6 order-2 wow fadeIn" data-wow-delay="800ms">
                                <div class="inner-box">
                                    <div class="icon flaticon-home-2"></div>
                                    <h4><a href="property-detail.html">Proprety Search</a></h4>
                                    <div class="text">Estate Management</div>
                                </div>
                            </div>

                            <!-- Feature-block -->
                            <div class="feature-block col-lg-6 col-md-6 wow fadeIn" data-wow-delay="1200ms">
                                <div class="inner-box">
                                    <div class="icon flaticon-mortgage"></div>
                                    <h4><a href="property-detail.html">Market Analysis</a></h4>
                                    <div class="text">Estate Management</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End About Section -->

    <!-- Property Section -->
    <section class="property-section" style="background-image: url(images/background/1.jpg);">
        <div class="auto-container">
            <div class="sec-title light text-center">
                <div class="devider"><span></span></div>
                <h2>最新房产</h2>
                <div class="text">寻找你的房产</div>
            </div>

            <div class="property-carousel owl-carousel owl-theme">
                <!-- Property Block -->
                <div class="property-block" th:each="newestlist:${newrecommendlist}">
                    <div class="inner-box">
                        <div class="image-box">
                            <figure class="image"><a href="property-detail.html"><img src="images/icons/empty.png" th:data-src="${newestlist.getGalleys().getImg()}" alt=""></a></figure>
                            <span class="for" th:text="${newestlist.getGalleys().getStatus()}"></span>
                        </div>
                        <div class="lower-content">
                            <ul class="property-info clearfix">
                                <li><span class="icon fa fa-expand"></span> Sq Ft 12,000</li>
                                <li><span class="icon fa fa-bed" th:text="${newestlist.getGalleys().getBedrooms()}"></span></li>
                                <li><span class="icon fa fa-bath" th:text="${newestlist.getGalleys().getBathrooms()}"></span></li>
                            </ul>
                            <h3><a href="property-detail.html" th:text="${newestlist.getGalleys().getName()}"></a></h3>
                            <div class="text" th:text="${newestlist.getGalleys().getDetail()}"></div>
                            <div class="property-price clearfix">
                                <div class="location"><span class="icon fa fa-map-marker-alt" th:text="${newestlist.getGalleys().getAddress()}"></span></div>
                                <div class="price" th:text="${newestlist.getGalleys().getPrice()}"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!--End Property Section -->

    <!--Popular Places Section-->
    <section class="popular-places-section">
        <div class="auto-container">
            <div class="sec-title text-center">
                <div class="devider"><span></span></div>
                <h2>Most Popular Places</h2>
                <div class="text">Find Your Dream House in Your City</div>
            </div>
    
            <div class="masonry-items-container clearfix">
                <!-- Portfolio Item -->
                <div class="popular-item masonry-item small-item">
                    <div class="image-box">
                        <figure class="image"><img src="images/icons/empty.png" data-src="images/gallery/1.jpg" alt=""></figure>
                        <div class="caption-box">
                            <h4>Apartment</h4>
                            <span>5 Properties</span>
                        </div>
                        <div class="overlay-box">
                            <div class="info-box">
                                <h4>Apartment</h4>
                                <span class="properties">5 Properties</span>
                                <a href="images/gallery/1.jpg" class="lightbox-image images-btn">25 Photos <span class="fa fa-search"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!--End Popular Places-->

    <!-- Agents Section -->
    <div class="agents-section" >
        <div class="auto-container">
            <div class="sec-title">
                <div class="devider"><span></span></div>
                <h2>MEET OUR AGENTS</h2>
                <div class="text">Raqba Real Estate Meet Agents</div>
            </div>

            <div class="agents-carousel owl-carousel owl-theme">
                <!-- Agent Block -->
                <div class="agent-block" th:each="agentlist:${agents}">
                    <div class="inner-box">
                        <div class="image-box">
                            <figure class="image"><a th:href="@{/toagentdetail(agentid=${agentlist.getAid()})}"><img src="images/icons/empty.png" th:data-src="${agentlist.getAimg()}" alt=""></a></figure>
                        </div>
                        <div class="info-box">
                            <h4 class="name"><a href="agent-detail.html" th:text="${agentlist.getAname()}"></a></h4>
                            <span class="designation" th:text="${agentlist.getPropertiesnum()}"></span>
                            <ul class="social-links social-icon-colored">
                                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-pinterest"></i></a></li>
                                <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Agents Section -->

     <!-- Testimonial Section -->
    <section class="testimonial-section">
        <div class="auto-container">
            <div class="sec-title text-center">
                <div class="devider"><span></span></div>
                <h2>What Our Client Says</h2>
                <div class="text">Find Your Dream House in Your City</div>
            </div>

            <div class="testimonial-carousel owl-carousel owl-theme">
                <!-- Testimonial Block -->
                <div class="testimonial-block" th:each="comments:${commentlist}">
                    <div class="inner-box">
                        <div class="image-box">
                            <figure class="image"><img src="images/icons/empty.png" data-src="images/resource/testi-thumb.jpg" alt=""></figure>
                        </div>
                        <div class="content-box">
                            <span class="designation">Business Preson</span>
                            <h4 class="name" th:text="${comments.getUsername()}"></h4>
                            <div class="text" th:text="${comments.getSay()}"></div>
                            <div class="rating"><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!--End Testimonial Section -->

    <!-- Call To Action -->
    <section class="call-to-action" style="background-image: url(images/background/2.jpg);" data-stellar-background-ratio="0.5">
        <div class="auto-container">
            <div class="sec-title light text-center">
                <div class="text">Buy or sell your house in few seconds.</div>
                <h2>RAQBA Real Estate Co.</h2>
            </div>
            <div class="btn-box">
                <a href="admin/submit-property.html" class="theme-btn btn-style-two"><span class="btn-title">Submit Property</span></a>
                <a href="property-grid-view.html" class="theme-btn btn-style-four"><span class="btn-title">Browes Property</span></a>
            </div>
        </div>
    </section>
    <!--End Call To Action -->

    <!-- News Section -->
    <section class="news-section">
        <div class="auto-container">
            <div class="sec-title text-center">
                <div class="devider"><span></span></div>
                <h2>Our News & Artical</h2>
                <div class="text">All About Latest Raqba Updates</div>
            </div>

            <div class="inner-container">
                <div class="news-carousel owl-carousel owl-theme">
                    <!-- News BLock -->
                    <div class="news-block">
                        <div class="inner-box">
                            <div class="image-box">
                                <figure class="image"><a href="blog-detail.html"><img src="images/icons/empty.png" data-src="images/resource/news-1.jpg" alt=""></a></figure>
                            </div>
                            <div class="lower-content">
                                <div class="post-date">23 June 2019</div>
                                <h3><a href="blog-detail.html">Do You Know How Home Value.</a></h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End News Section -->

    <!--Clients Section-->
    <section class="clients-section">
        <div class="auto-container">
            <div class="sponsors-outer">
                <!--Sponsors Carousel-->
                <ul class="sponsors-carousel owl-carousel owl-theme">
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/1.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/2.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/3.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/4.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/5.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/1.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/2.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/3.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/4.png" alt=""></a></figure></li>
                    <li class="slide-item"><figure class="image-box"><a href="#"><img src="images/icons/empty.png" data-src="images/clients/5.png" alt=""></a></figure></li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Clients Section-->

    <!-- Main Footer -->






    <div th:include="footer :: footname"></div>





    <!-- End Main Footer -->

</div>
<!--End pagewrapper-->

<!-- Color Palate / Color Switcher -->
<div class="color-palate">
    <div class="color-trigger">
        <i class="fa fa-cog"></i>
    </div>
    <div class="color-palate-head">
        <h6>Choose Your Color</h6>
    </div>
    <div class="various-color clearfix">
        <div class="colors-list">
            <span class="palate default-color active" data-theme-file="css/color-themes/default-theme.css"></span>
            <span class="palate green-color" data-theme-file="css/color-themes/green-theme.css"></span>
            <span class="palate blue-color" data-theme-file="css/color-themes/blue-theme.css"></span>
            <span class="palate orange-color" data-theme-file="css/color-themes/orange-theme.css"></span>
            <span class="palate purple-color" data-theme-file="css/color-themes/purple-theme.css"></span>
            <span class="palate teal-color" data-theme-file="css/color-themes/teal-theme.css"></span>
            <span class="palate brown-color" data-theme-file="css/color-themes/brown-theme.css"></span>
            <span class="palate redd-color" data-theme-file="css/color-themes/redd-color.css"></span>
        </div>
    </div>
    
    <div class="palate-foo">
        <span>You will find much more options for colors and styling in admin panel. This color picker is used only for demonstation purposes.</span>
    </div>
</div><!-- End Color Switcher -->

<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target="html"><span class="fa fa-angle-double-up"></span></div>
<script th:src="@{js/jquery.js}"></script>
<script th:src="@{js/popper.min.js}"></script>
<script th:src="@{js/bootstrap.min.js}"></script>
<script th:src="@{js/jquery-ui.js}"></script>
<script th:src="@{js/jquery.fancybox.js}"></script>
<script th:src="@{js/owl.js}"></script>
<script th:src="@{js/wow.js}"></script>
<script th:src="@{js/isotope.js}"></script>
<script th:src="@{js/jquery.stellar.min.js}"></script>
<script th:src="@{js/appear.js}"></script>
<script th:src="@{js/script.js}"></script>
<!-- Color Setting -->
<script th:src="@{js/color-settings.js}"></script>
</body>
</html>